<template>
  <div id="login">
    <div class="head-wrap">
      <div class="logo"></div>
      <div class="talk"></div>
    </div>
    <div class="form-wrap">
      <div class="form-item-box">
        <div class="form-item-wrap" :class="{'active':currentInput === 1 }">
          <div class="icon icon-name2" v-if="currentInput === 1"></div>
          <div class="icon icon-name" v-else></div>
          <div class="minus">-</div>
          <div class="select-num">{{mobileArea}}</div>
          <div class="triangle-wrap" @click="sheetVisible=true">
            <div class="triangle"></div>
          </div>
          <input
              placeholder="请输入注册手机号"
              @blur='checkInput(1)'
              @focus="currentInput=1"
              v-model="mobile"/>
        </div>
        <div class="tip">{{ regListTil.usernameTil }}</div>
      </div>
      <div class="form-item-box">
        <div class="form-item-wrap" :class="{'active':currentInput === 2}">
          <div class="icon icon-private2" v-if="currentInput === 2"></div>
          <div class="icon icon-private" v-else></div>
          <div class="minus">-</div>
          <input
              placeholder="请输入用户密码"
              type="password"
              @blur='checkInput(2)'
              @focus="currentInput=2"
              v-model="password"/>
        </div>
        <div class="tip">{{ regListTil.passwordTil }}</div>
      </div>
        <div class="form-item-bottom">
          <label>
            <input type="checkbox" v-model="rememberMe" @input="remember"/>
            <span class="checked-box" v-if="rememberMe"></span>
            <span class="box" v-else></span>
            <span>记住我</span>
          </label> 
          <div class="forget-password" @click="goForgetPassword">忘记密码?</div>
        </div>
        <mt-button @click="login" :disabled="ableBtn" :class="{'active':!ableBtn}">登录</mt-button>
        <div class="register">
          我还没有账户，<span class="click-register" @click="register">立即注册送五元现金</span>
        </div>
        <div class="agreement">注册即表示您同意《风暴电竞》<span>用户使用协议</span></div>
    </div>
    <mt-actionsheet
      :actions="actions"
      v-model="sheetVisible">
    </mt-actionsheet>
  </div>
</template>

<script>
import { login } from "@/api/user";
import { saveUserInfo, removeUserInfo } from "@/libs/utils";
import { setToken } from "@/libs/utils";
export default {
  name: "login",
  data() {
    return {
      mobile: "",
      mobileArea: "+86",
      password: "",
      rememberMe: false,
      sheetVisible: false,
      actions: [
        { name: "+86", method: this.selectMobileArea },
        { name: "+93", method: this.selectMobileArea }
      ],
      regListTil: {
        usernameTil: "",
        passwordTil: ""
      },
      validationResults: {
        mobile: false,
        password: false
      },
      currentInput: -1
    };
  },
  mounted() {
    let val = localStorage.getItem("loginUserInfo");
    if (val) {
      let data = JSON.parse(val);
      this.mobile = data.mobile;
      this.mobileArea = data.mobileArea;
      this.password = data.password;
      this.rememberMe = data.rememberMe;
    }
  },
  computed: {
    ableBtn() {
      var assistNum = 0;
      if (this.mobile.length === 11 && this.regListTil.usernameTil === "") {
        assistNum++;
      }
      if (this.password.length >= 8) {
        assistNum++;
      }
      if (assistNum === 2) {
        return false;
      } else {
        return true;
      }
    }
  },
  methods: {
    register() {
      this.$router.push({
        name: "register"
      });
    },
    selectMobileArea(val) {
      this.mobileArea = val.name;
    },
    goForgetPassword() {
      this.$router.push({
        name: "forget-password"
      });
    },
    remember(val) {
      if (val.target.checked) {
        let data = {
          mobile: this.mobile,
          password: this.password,
          mobileArea: this.mobileArea,
          rememberMe: true
        };
        saveUserInfo(data);
      } else {
        removeUserInfo();
      }
    },
    // 检验手机号
    checkInput(value) {
      this.currentInput = -1;
      this.$nextTick(function() {
        if (value === 1) {
          console.log(value);
          let val = this.mobile;
          if (!/^1[34578]\d{9}$/.test(val)) {
            if (!val.length) {
              this.regListTil.usernameTil = "";
            } else if (val.length >= 11) {
              this.mobile = val.slice(0, 11);
            } else {
              this.validationResults.mobile = false;
              this.regListTil.usernameTil = "请输入正确格式手机号";
            }
          } else {
            // 验证手机号是否被注册过
            // var realTimePhone = { username: this.registerList.username };
            // this.$store.dispatch('actions_realTimePhone', realTimePhone)
            // axios({
            //   method: "get",
            //   url: "/dlfc-user-authc-service/registry/check",
            //   params: realTimePhone
            // }).then(res => {
            //   console.log("验证成功");
            //   console.log(res);
            //   if (res.code === 0) {
            this.validationResults.mobile = true;
            this.regListTil.usernameTil = "";
            //     this.assiantBtnNum1 = 1;
            //   } else {
            //     this.regListTil.usernameTil = res.message;
            //   }
            // });
          }
        }
        if (value === 2) {
          let val = this.password;
          if (!/^[A-Za-z0-9]{8,12}$/.test(val)) {
            if (!val.length) {
              this.regListTil.passwordTil = "";
            } else {
              this.regListTil.passwordTil = "请输入8-20位英文或数字";
            }
            this.validationResults.password = false;
          } else {
            this.validationResults.password = true;
            this.regListTil.passwordTil = "";
          }
        }
      });
    },

    login() {
      let data = {
        username: this.mobile,
        password: this.password
      };
      login(data).then(res => {
        if (res.data.code === "0000") {
          setToken(res.data.data.token);
          this.$router.push({
            name: "home"
          });
          this.$toast({
            message: res.data.message,
            iconClass: "icon icon-success"
          });
        } else {
          this.$toast({
            message: res.data.message,
            iconClass: "icon icon-success"
          });
        }
      });
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
#login {
  position: relative;
  width: 100%;
  height: 100vh;
  background: url("../assets/img/BG.png");
  background-size: 100% 100%;
  padding: 9.7vh 13.3vw 0;
  box-sizing: border-box;
  overflow: hidden;
  .head-wrap {
    position: relative;
    .logo {
      width: 32.3vw;
      height: 38.1vw;
      max-height: 21.4vh;
      max-width: 18.1vh;
      background: url("../assets/img/logo.png");
      background-size: 100% 100%;
      margin: 0 auto;
    }
    .talk {
      position: absolute;
      bottom: -12.3vw;
      right: -12.3vw;
      background: url("../assets/img/icon_客服.png");
      background-size: 100% 100%;
      width: 12.3vw;
      height: 12.3vw;
    }
  }
  .form-item-box {
    position: relative;
    &:first-of-type {
      margin-top: 54px;
    }
    padding-bottom: 14px;
    .form-item-wrap {
      display: flex;
      align-items: center;
      height: 9.6vw;
      border-bottom: 1px solid #303241;
      &.active {
        border-bottom: 1px solid #00b07c;
      }
      .icon {
        width: 4vw;
        height: 4.4vw;
      }
      .icon-name {
        background: url("../assets/img/icon_name.png");
        background-size: 100% 100%;
      }
      .icon-name2 {
        background: url("../assets/img/icon_name2.png");
        background-size: 100% 100%;
      }
      .icon-private {
        background: url("../assets/img/icon_private.png");
        background-size: 100% 100%;
      }
      .icon-private2 {
        background: url("../assets/img/icon_private2.png");
        background-size: 100% 100%;
      }
      .minus {
        color: #7c818e;
        padding: 0 3.5vw;
      }
      .select-num {
        font-size: 12px;
        color: #c5c9e2;
      }
      .triangle-wrap {
        font-size: 0;
        padding: 1.3vw;
        .triangle {
          display: inline-block;
          width: 2.4vw;
          height: 1.3vw;
          background: url("../assets/img/icon_touch.png");
          background-size: 100% 100%;
        }
      }
      & > input {
        font-size: 12px;
        background: transparent;
        border: none;
        outline: none;
        color: #c5c9e2;
      }
    }
    .tip {
      position: absolute;
      bottom: 0;
      font-size: 10px;
      left: 0;
      color: #00b07c;
    }
  }

  .form-item-bottom {
    display: flex;
    justify-content: space-between;
    height: 9.2vw;
    line-height: 9.2vw;
    color: #4f4e60;
    font-size: 10px;
    & > label {
      display: flex;
      align-items: center;
      & > input {
        display: none;
      }
      .box {
        width: 2.7vw;
        height: 2.7vw;
        border: 1px solid #4f4e60;
        margin-right: 1.3vw;
      }
      .checked-box {
        width: 2.7vw;
        height: 2.7vw;
        background: url("../assets/img/duigou.png");
        border: 1px solid #01b07d;
        background-size: 100% 100%;
        margin-right: 1.3vw;
      }
    }
  }
  .mint-button {
    margin-top: 8.4vh;
    width: 100%;
    color: #c5c9e2;
    font-size: 14px;
    line-height: 28px;
    background: #212c33;
    border: 1px solid #01b07d;
    &.active {
      color: #fff;
      background: #00e7a3;
    }
  }

  .register {
    color: #7c7f8f;
    text-align: center;
    margin-top: 5.3vw;
    font-size: 10px;
    .click-register {
      color: #01b07d;
      font-size: 10px;
      cursor: pointer;
      text-decoration: underline;
    }
  }
  .agreement {
    position: absolute;
    bottom: 20px;
    left: 0;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    color: #7c7f8f;
    font-size: 8px;
    & > span {
      color: #01b07d;
      cursor: pointer;
    }
  }
}
</style>
